<template>
    <div class="tyus-sub-menu-container">
        <div class="tyus-sub-menu-content">
            <i class="tyus-icon" :class="props.icon"></i>
            <span class="tyus-sub-menu-label">{{ props.label }}</span>
            <i class="tyus-icon tyus-icon-arrow-down-line"></i>
        </div>
        <!-- <slot></slot> -->
    </div>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue';
// 外部参数
const props = defineProps({
    // 标题
    label: { type: String, default: '' },
    // icon
    icon: { type: String, default: '' },
});
</script>

<style lang="scss" scoped>
.tyus-sub-menu-container {
    --tyus-menu-item-height: var(--height-large);
    $tyus-menu-item-padding: var(--padding-horizontal-default);
    $tyus-menu-item-padding-small: var(--padding-horizontal-small);

    .tyus-sub-menu-content {
        @include flex.display-flex;
        width: 100%;
        height: var(--tyus-menu-item-height);
        align-items: center;
        padding: 0 var(--padding-horizontal-default);
        box-sizing: border-box;
    }

    .tyus-icon {
        font-size: var(--font-size-default);
        &:first-child {
            margin-right: var(--padding-horizontal-small);
        }
        &:last-child {
            margin-left: var(--padding-horizontal-small);
        }
    }

    .tyus-sub-menu-label {
        @include flex.flex(1);
        @include common.text-ellipsis;
    }
}
</style>
